<template>
    <div class="user-index">
        <div class="table-user">
            <Table :columns="columns" :data="userList"></Table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="1000">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { globalUrl } from '../api/doMain'
import request from '@/api/request'

export default {
    name: 'User',
    created () {
        this.queryList()
    },
    data () {
        return {
            pageNum: 1,
            pageSize: 20,
            columns: [
                {
                    title: 'Id',
                    key: 'id',
                    maxWidth: 55,
                    type: 'selection'
                },
                {
                    title: '头像',
                    key: 'headImgUrl',
                    render: (h, params) => {
                        return h('div', [
                            h('img', {
                                style: {
                                    width: '40px',
                                    verticalAlign: 'middle',
                                    borderRadius: '5px'
                                },
                                attrs: {
                                    src: params.row.headImgUrl
                                }
                            })
                        ])
                    }
                },
                {
                    title: '姓名',
                    key: 'userName'
                },
                {
                    title: '昵称',
                    key: 'nickName'
                },
                {
                    title: '手机',
                    key: 'phone',
                    width: 150
                },
                {
                    title: '邮箱',
                    key: 'email',
                    width: 200
                },
                {
                    title: '公司',
                    key: 'company'
                },
                {
                    title: '地址',
                    key: 'address'
                },
                {
                    title: '性别',
                    key: 'sex',
                    maxWidth: 70,
                    render: (h, params) => {
                        let text = ''
                        if ( params.row.sex == 1 ) {
                            text = '男'
                        } else {
                            text = '女'
                        }
                        return h('div', [
                            h('span', {}, text)
                        ])
                    }
                },
                {
                    title: '城市',
                    key: 'city'
                },
                {
                    title: '签名',
                    key: 'sign',
                    tooltip: true
                }
            ],
            userList: []
        }
    },
    methods: {
        queryList () {
            const that = this
            let userEntity = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                token: window.sessionStorage.getItem('token')
            }
            request.post(globalUrl + '/user/queryList', userEntity).then(res=>{
                that.userList = res.data.data
            })
        }
    }
}
</script>

<style scoped>

</style>
